<template>
    <div class="row">
       <div v-show="info.userData.length" class="card" v-for="user in info.userData" :key="user.id">
         <a :href="user.html_url" target="_blank">
           <img :src="user.avatar_url" style='width: 100px'/>
         </a>
         <p class="card-text">{{ user.login }}</p>
       </div>
       <!-- 展示欢迎词 -->
       <h2 v-show="info.isFirst">welcome</h2>
 
       <!-- 展示加载中 -->
       <h2 v-show="info.isLoading">loading</h2>
       <!-- 展示错误信息 -->
       <h2>{{ info.errorMsg }}</h2>
     </div>
 </template>
 
 <script>
 export default {
     name:'MyList',
     data(){
         return {
             
             info:{
                 isFirst:true,
                 isLoading:false,
                 errorMsg:'',
                 userData:[],
             }
         }
     },
     mounted(){
         this.$bus.$on('search',(info)=>{
             //console.log('收到数据：',returnData)
             this.info = info;
         })
     }
 }
 </script>
 
 <style scoped>
     .album {
     min-height: 50rem; /* Can be removed; just added for demo purposes */
     padding-top: 3rem;
     padding-bottom: 3rem;
     background-color: #f7f7f7;
     }
 
     .card {
     float: left;
     width: 33.333%;
     padding: .75rem;
     margin-bottom: 2rem;
     border: 1px solid #efefef;
     text-align: center;
     }
 
     .card > img {
     margin-bottom: .75rem;
     border-radius: 100px;
     }
 
     .card-text {
     font-size: 85%;
     }
 
 </style>